<template>
	<section>
		<div v-if="$store.state.courseInfo.type==0&&$store.state.role=='teacher'">
			<template>
				<div class="box-content">													
					<h1 style="margin:0">创业基础模块</h1>
					<h1 style="margin:0">开课时间：{{courseStages[0].startTime}}</h1>
					<el-button type="success" style="margin: 10px 0;" @click="addtemplebox(0,'basis')">添加创业基础课程章节</el-button>
					<el-button type="danger" style="margin: 10px 0;" @click="paiIndex(0)">修改排课时间</el-button>
					<el-table :data="courseStages[0].stageUnits"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column 
					      prop="name"
					      label="课程章节名称"
					      width="200"
					      >
					    </el-table-column>
			 			<el-table-column prop="isOffline" label="上课方式" width="200">
				 			<template scope="scope">
				 				<p>{{courseStages[0].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点"  width="200">
				 			<template scope="scope">
				 				<p>{{courseStages[0].location?courseStages[0].location:"无"}}</p>
				 			</template>
					    </el-table-column>					    
					    <el-table-column
					      prop="roughTime"
					      label="建议学时（小时）"
					     >
					    </el-table-column>
						<el-table-column label="操作" min-width="300" fixed="right" >
							<template scope="scope">
								<el-button size="small" @click="handleDel(scope.row)" type="danger">删除</el-button>
								<el-button size="small" @click="getone(scope.row,'1','basis')" type="primary">设置</el-button>
								<el-button size="small" type="info" @click="Lookone(scope.row)">预览</el-button>								
								<el-button size="small" @click="Record(scope.row,'up','basis',scope.$index)" type="success">上移</el-button>
								<el-button size="small" @click="Record(scope.row,'down','basis',scope.$index)" type="warning">下移</el-button>
							</template>					
						</el-table-column>
					</el-table>		
				</div>
			</template>
			<template>
				<div class="box-content">													
					<h1 style="margin:0">案例分析模块</h1>
					<h1 style="margin:0">开课时间：{{courseStages[1].startTime}}</h1>
					<el-button type="info" style="margin: 10px 0;"  @click="addtemplebox(1,'case')">添加案例分析课程章节</el-button>
					<el-button type="danger" style="margin: 10px 0;" @click="paiIndex(1)">修改排课时间</el-button>
					
					<el-table :data="courseStages[1].stageUnits"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      prop="name"
					      label="课程章节名称"
					      >
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[1].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[1].location?courseStages[1].location:"无"}}</p>
				 			</template>
					    </el-table-column>			    
					    <el-table-column
					      prop="roughTime"
					      label="建议学时（小时）"
					     >
					    </el-table-column>
						<el-table-column label="操作"  min-width="300" fixed="right" >
							<template scope="scope">
								<el-button size="small" @click="handleDel(scope.row)" type="danger">删除</el-button>
								<el-button size="small" @click="getone(scope.row,scope.$index,'case')" type="primary">设置</el-button>
								<el-button size="small" type="info" @click="Lookone(scope.row)">预览</el-button>								
								<el-button size="small" @click="Record(scope.row,'up','case',scope.$index)" type="success">上移</el-button>
								<el-button size="small" @click="Record(scope.row,'down','case',scope.$index)" type="warning">下移</el-button>
							</template>					
						</el-table-column>
					</el-table>	
				</div>
			</template>	
			<template>
				<div class="box-content">													
					<h1 style="margin:0">沙盘推演模块</h1>
					<h1 style="margin:0">开课时间：{{courseStages[2].startTime}}</h1>
					<el-button type="warning" style="margin: 10px 0;" @click.native="drawFormVisible = true">添加沙盘推演课程章节</el-button>
					<el-button type="danger" style="margin: 10px 0;" @click="paiIndex(2)">修改排课时间</el-button>					
					
					<el-table :data="drawingTypeIds"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      label="沙盘推演图纸名称"
					      >
							<template scope="scope">
								<span v-if="scope.row==1">消费者体验流程图</span>
								<span v-if="scope.row==2">典型人物</span>
								<span v-if="scope.row==3">服务蓝图</span>
								<span v-if="scope.row==4">商业模式画布</span>
								<span v-if="scope.row==5">电梯演讲</span>
								<span v-if="scope.row==6">洞察分析</span>
								<span v-if="scope.row==7">思维导图</span>
							</template>							      
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[2].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[2].location?courseStages[2].location:"无"}}</p>
				 			</template>
					    </el-table-column>					    
					    <el-table-column
					      prop="roughTime"
					      label="沙盘推演小节总建议学时（小时）"
					     >
					     <template scope="scope">
					     	<p>1</p>
					     </template>
					    </el-table-column>
						<el-table-column label="操作"  min-width="300" fixed="right" >
							<template scope="scope">
								<el-button size="small" @click="drawRecord(drawingTypeIds,scope.$index,'delete')" type="danger">删除</el-button>
								<el-button size="small" @click="drawRecord(drawingTypeIds,scope.$index,'up')" type="success">上移</el-button>
								<el-button size="small" @click="drawRecord(drawingTypeIds,scope.$index,'down')" type="warning">下移</el-button>
							</template>					
						</el-table-column>
					</el-table>	
				</div>
			</template>		
			<template>
				<div class="box-content">													
					<h1 style="margin:0;margin-bottom: 10px;">项目路演模块</h1>
					<h1 style="margin:0">开课时间：{{courseStages[3].startTime}}</h1>
					<el-button type="danger" style="margin: 10px 0;" @click="paiIndex(3)">修改排课时间</el-button>					
					<el-table :data="roads"  height="auto"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      prop="name"
					      label="项目路演模块"
					      >
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[3].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[3].location?courseStages[3].location:"无"}}</p>
				 			</template>
					    </el-table-column>						    
					</el-table>	
				</div>
			</template>						
		</div>	
		<div v-if="$store.state.courseInfo.type!=0||$store.state.role!='teacher'">
			<template>
				<div class="box-content">													
					<h1 style="margin:0">创业基础模块</h1>
					<h1 style="margin:10px 0">开始时间：{{courseStages[0].startTime}}</h1>
					<h1 style="margin:0" v-if="courseStages[0].location">上课地点：{{courseStages[0].location}}</h1>					
					<el-table :data="courseStages[0].stageUnits"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      prop="name"
					      label="课程章节名称"
					      >
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[0].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[0].location?courseStages[0].location:"无"}}</p>
				 			</template>
					    </el-table-column>						    
					    <el-table-column
					      prop="roughTime"
					      label="建议学时（小时）"
					     >
					    </el-table-column>
					</el-table>		
				</div>
			</template>
			<template>
				<div class="box-content">													
					<h1 style="margin:0">案例分析模块</h1>
					<h1 style="margin:10px 0">开始时间：{{courseStages[1].startTime}}</h1>
					<h1 style="margin:0" v-if="courseStages[1].location">上课地点：{{courseStages[1].location}}</h1>								
					<el-table :data="courseStages[1].stageUnits"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      prop="name"
					      label="课程章节名称"
					      >
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[1].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[1].location?courseStages[1].location:"无"}}</p>
				 			</template>
					    </el-table-column>					    
					    <el-table-column
					      prop="roughTime"
					      label="建议学时（小时）"
					     >
					    </el-table-column>
					</el-table>	
				</div>
			</template>	
			<template>
				<div class="box-content">													
					<h1 style="margin:0">沙盘推演模块</h1>
					<h1 style="margin:10px 0">开始时间：{{courseStages[2].startTime}}</h1>
					<h1 style="margin:0" v-if="courseStages[2].location">上课地点：{{courseStages[2].location}}</h1>							
					<el-table :data="drawingTypeIds"  height="200"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      label="沙盘推演图纸名称"
					      >
							<template scope="scope">
								<span v-if="scope.row==1">消费者体验流程图</span>
								<span v-if="scope.row==2">典型人物</span>
								<span v-if="scope.row==3">服务蓝图</span>
								<span v-if="scope.row==4">商业模式画布</span>
								<span v-if="scope.row==5">电梯演讲</span>
								<span v-if="scope.row==6">洞察分析</span>
								<span v-if="scope.row==7">思维导图</span>
							</template>							      
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[2].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[2].location?courseStages[2].location:"无"}}</p>
				 			</template>
					    </el-table-column>						    
					    <el-table-column
					      prop="roughTime"
					      label="沙盘推演小节总建议学时（小时）"
					     >
					     <template scope="scope">
					     	<p>1</p>
					     </template>
					    </el-table-column>
					</el-table>	
				</div>
			</template>		
			<template>
				<div class="box-content">													
					<h1 style="margin:0;margin-bottom: 10px;">项目路演模块</h1>		
					<h1 style="margin:10px 0">开始时间：{{courseStages[3].startTime}}</h1>
					<h1 style="margin:0" v-if="courseStages[3].location">上课地点：{{courseStages[3].location}}</h1>							
					<el-table :data="roads"  height="auto"  style="width: 100%"> 
						<el-table-column  type="index" width='80'>
						</el-table-column>						 	
					 	<el-table-column
					      prop="name"
					      label="项目路演模块"
					      >
					    </el-table-column>
		 				<el-table-column prop="isOffline" label="上课方式">
				 			<template scope="scope">
				 				<p>{{courseStages[3].isOffline?"线下学习":'线上学习'}}</p>
				 			</template>
					    </el-table-column>	
				 		<el-table-column prop="location" label="上课地点">
				 			<template scope="scope">
				 				<p>{{courseStages[3].location?courseStages[3].location:"无"}}</p>
				 			</template>
					    </el-table-column>						    
					</el-table>	
				</div>
			</template>						
		</div>			
		<!--设置界面-->
		<el-dialog  title="设置课程章节" :fullscreen="false" custom-class="templetdialog" width="30%"  v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="edittemplet" status-icon class="demo-ruleForm"  :rules="edittempletrule" ref="edittemplet" label-width="50px">		
				<el-form-item label="课程章节名称"  label-width="80" > 
				    <el-input style="width:40%;" type="text"  placeholder="填写小节名称（15字以内）"  v-model="edittemplet.name"></el-input>
				</el-form-item>	
				<el-form-item label="课程章节类型" label-width="80" >
					{{edittemplet.courseStage==0?'创业基础课程章节':'案例分析课程章节'}}
				    </el-radio-group>
				</el-form-item>	
				<el-form-item label="所属商业模式版块" label-width="80"  v-if="edittemplet.courseStage==0">
				    <el-select placeholder="请选择版块"  v-model="edittemplet.businessModelId" disabled>
				      <el-option v-for="el in bussinessList"  :value="el.businessModelId" :label="el.name"></el-option>
				    </el-select>
				</el-form-item>				
				<el-form-item label="教案选择"  label-width="80" >
					<el-row>
						<el-col :span="6">
						    <el-select placeholder="请选择教案选择" style="width: 100%;" v-model="edittemplet.planIds" multiple >
						      <el-option v-for="el in planlist" :key="el.planId"  :value="el.planId" :label="el.name"></el-option>
						    </el-select>							
						</el-col>
						<el-col :span="12" :offset="2">
						  <el-radio-group v-model="planselect">
						    <el-radio-button label="1">只看自己</el-radio-button>
						    <el-radio-button label="2">共享教案</el-radio-button>
						    <el-radio-button label="3">内置教案</el-radio-button>
						  </el-radio-group>							
						</el-col>						
					</el-row>

				</el-form-item>				
				<el-form-item label="视频选择" label-width="80">
					<el-row>
						<el-col :span="6">
						    <el-select placeholder="请选择视频选择" style="width: 100%;" v-model="edittemplet.videoIds" multiple >
						      <el-option v-for="el in videolist" :key="el.videoId" :value="el.videoId" :label="el.name"></el-option>
						    </el-select>							
						</el-col>
						<el-col :span="12" :offset="2">
							<el-radio-group v-model="videoselect">
							    <el-radio-button label="1">只看自己</el-radio-button>
							    <el-radio-button label="2">共享视频</el-radio-button>
							    <el-radio-button label="3">内置视频</el-radio-button>
							</el-radio-group>							
						</el-col>							
					</el-row>
				</el-form-item>		
				<el-form-item label="图纸选择" label-width="80" v-if="edittemplet.courseStage==1">
					<el-row>
						<el-col :span="6">
						    <el-select placeholder="请选择教案选择" style="width: 100%;" v-model="edittemplet.drawingIds" multiple >
						      <el-option v-for="el in drawlist" :key="el.drawingId"  :value="el.drawingId" :label="el.name"></el-option>
						    </el-select>							
						</el-col>
						<el-col :span="12" :offset="2">
							<el-radio-group v-model="drawselect">
							    <el-radio-button label="1">只看自己</el-radio-button>
							    <el-radio-button label="2">共享图纸</el-radio-button>
							    <el-radio-button label="3">内置图纸</el-radio-button>
							</el-radio-group>							
						</el-col>							
					</el-row>
				</el-form-item>		
				<el-form-item label="作业选择" label-width="80">
					<el-row>
						<el-col  :span="6">
						    <el-select placeholder="请选择作业选择" style="width: 100%;" v-model="edittemplet.problemIds" multiple >
						      <el-option v-for="el in worklist" :key="el.problemId" :value="el.problemId" :label="el.name"></el-option>
						    </el-select>							
						</el-col>
						<el-col :span="12" :offset="2">
							<el-radio-group v-model="workselect">
							    <el-radio-button label="1">只看自己</el-radio-button>
							    <el-radio-button label="2">共享作业</el-radio-button>
							    <el-radio-button label="3">内置作业</el-radio-button>
							</el-radio-group>							
						</el-col>
					</el-row>
				</el-form-item>		
				<el-form-item label="建议时长（小时）" label-width="80">
				    <el-input style="width:40%;" type="number" v-model="edittemplet.roughTime"></el-input>
				</el-form-item>			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">更新</el-button>
			</div>
		</el-dialog>	
		<el-dialog  title="选择课程章节" :fullscreen="false" custom-class="workdialog" width="30%"  v-model="addFormVisible" :close-on-click-modal="false">
			<el-col :span="24" class="toolbar"  style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item label="所属商业模式版块" v-if="courseType=='basis'">
					    <el-select placeholder="请选择版块" size="small"  v-model="templetbusinessModelId">
					    	<el-option value="" label="全部"></el-option>
					      <el-option v-for="el in bussinessList" :value="el.businessModelId" :label="el.name"></el-option>
					    </el-select>
					</el-form-item>		
					<el-form-item label="课程章节分类">
					    <el-select placeholder="请选择分类"size="small"  v-model="templet.templettype">
					      <el-option value="1" label="只看自己"></el-option>
					      <el-option value="2" label="共享小节"></el-option>
					      <el-option value="3" label="内置小节"></el-option>
					    </el-select>
					</el-form-item>						
					<el-form-item>
						<el-input  size="small"  v-model="templet.key" placeholder="输入查询的关键字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary"  size="small"  @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>	
			<el-table :data="Lists" highlight-current-row  style="width: 100%;"  @selection-change="handleSelectionChange">
			    <el-table-column
			      type="selection"
			      width="55">	
			    </el-table-column>
				<el-table-column prop="name" label="课程章节名称"  >
				</el-table-column>
				<el-table-column prop="realName" label="创建人"  >
				</el-table-column>
				<el-table-column prop="orgName" label="所属单位" >
				</el-table-column>			
				<el-table-column prop="updateTime" label="添加时间" sortable>
				</el-table-column>
				<el-table-column prop="referenceCount" label="引用次数" sortable>
				</el-table-column>			
			</el-table>	
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="templet.total" style="float:right;">
				</el-pagination>
			</el-col>				
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addList()" >添加</el-button>
			</div>
		</el-dialog>	
		<!--添加图纸-->
		<el-dialog  title="选择沙盘推演图纸" :fullscreen="false" custom-class="workdialog" width="30%"  v-model="drawFormVisible" :close-on-click-modal="false">
			<el-table :data="drawlit" highlight-current-row  style="width: 100%;"  @selection-change="drawSelectionChange">
			    <el-table-column
			      type="selection"
			      width="100">	
			    </el-table-column>
				<el-table-column prop="name" label="沙盘推演图纸名称" >
				</el-table-column>
			</el-table>	
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="templet.total" style="float:right;">
				</el-pagination>
			</el-col>				
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="drawFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addraw()">添加</el-button>
			</div>
		</el-dialog>
		<!--设置界面-->	
		<el-dialog  title="设置开始时间" :fullscreen="false" custom-class="dateformdate" width="30%"  v-model="paiFormVisible" :close-on-click-modal="false">
			<el-form :model="paiTime" status-icon class="demo-ruleForm"  :rules="paiTimerule" ref="paiTime" label-width="50px">		
				<el-form-item label="开始时间" label-width="80" >
				    <el-date-picker 
				      v-model="paiTime.startTime"
				      type="datetime"
				      placeholder="选择日期时间">
				    </el-date-picker>						
				</el-form-item>	
				<el-form-item label="上课方式" label-width="80" prop="isOffline">
				    <el-select placeholder="请选择上课方式"  v-model="paiTime.isOffline">
				      <el-option  value="0" label="线上学习"></el-option>
				      <el-option  value="1" label="线下学习"></el-option>
				    </el-select>
				</el-form-item>		
				<el-form-item label="上课地点"  label-width="80" prop="location" v-if="paiTime.isOffline==1"> 
				    <el-input style="width:40%;" type="text" placeholder="填写上课地点"  v-model="paiTime.location"></el-input>
				</el-form-item>					
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="paiFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="paiFun">提交</el-button>
			</div>
		</el-dialog>	
		<!--查看界面-->
		<el-dialog  title="查看课程章节" :fullscreen="false" custom-class="lookdialog" width="30%"  v-model="lookVisible" :close-on-click-modal="false">
			<template>
				<previews :tochild="looktemplet"  ref="dianss"></previews>
			</template>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="lookVisible = false">关闭</el-button>
			</div>
		</el-dialog>			
	</section>
</template>

<script>
  import {videolistbuil,worklistbuil,drawlistbuil,planlistbuil,templetlist,templetlistbuil,bussinesslist,templetone,videolist,worklist,drawlist,planlist,courseadd,coursunitedit,coursstage,courseone,coursunitadd,coursunitdelete,coursunitsortedit} from '../../api/api'
  import { quillEditor } from 'vue-quill-editor' //调用设置器
  import ComFunJS from '../../common/js/util' 
  import preview from '../draw/previewstage.vue';
  export default {
    data() {    	
      return {
        active: 0,
        step:1,
        addFormVisible:false,
        addLoading:false,
        drawFormVisible:false,
        editFormVisible:false,
        editLoading:false,
        paiFormVisible:false,
        lookVisible:false,
		planselect:"",
		looktemplet:{
			
		},
		videoselect:"",
		drawselect:"",
		workselect:"",
		planisShared:" ",				
		videoisShared:" ",	
		drawisShared:" ",	
		workisShared:" ",	
		planisSelf:"1",
		drawingTypeIds:[],
		videoisSelf:"1",
		drawisSelf:"1",
		workisSelf:"1",   
		paiTime:{
			startTime:"",
			isOffline:"",
			location:""
		},
		courseStages:[],
		paiTimerule:{
 			startTime:[
				{ required: true, message: '开始时间不能为空', trigger: 'blur' },
			], 
 			isOffline:[
				{ required: true, message: '学习方式不能为空', trigger: 'blur' },
			], 
 			location:[
				{ required: true, message: '地址不能为空', trigger: 'blur' },
			], 			
		},	
        edittemplet:{},
		edittempletrule: {
			roughTime:[
				{ required: true, message: '建议时长不能为空', trigger: 'blur' }
			],
			isOffline:[
				{ required: true, message: '上课时间方式不能为空', trigger: 'blur' }
			],
			location:[
				{ required: true, message: '上课时间地点不能为空', trigger: 'blur' }
			]	
		},	        
		drawlit:[{name:'消费者体验流程图',type:'1',roughTime:'1'},{name:'典型人物',type:'2',roughTime:'1'},{name:'服务蓝图',type:'3',roughTime:'1'},{name:'商业模式画布',type:'4',roughTime:'1'},{name:'电梯演讲',type:'5',roughTime:'1'},{name:'洞察分析',type:'6',roughTime:'1'},{name:'思维导图',type:'7',roughTime:'1'}],		
        templetbusinessModelId:'',     
        courseType:"",
        bussinessList:[],
        fileList:[],
		basis: [],
		casebox:[],
		derive:[],
		roads:[{name:'项目路演'}],
		Lists:[],
		testdrawlist:[],
		videolist:[],
		worklist:[],
		drawlist:[],				
		planlist:[],
		videolist2:[],
		worklist2:[],
		drawlist2:[],				
		planlist2:[],	
		unitJson:[],
		roads:[{name:'项目路演'}],		
		stage:"",
		unit:"",
		textdrawlist:[],
		templet:{
			total:'',
			page:'1',
			pagesize:'5',	
			isShared:' ',
			isSelf:'1',
			courseStage:'',
			key:"",
			templettype:'1',
		},
		paikeindex:"",
		InferisOffline:"",
		Inferlocation:"",
		RoadisOffline:"",
		Roadlocation:""
      }
    },
    watch:{
    	'addcourse.teamCount':function(){
    		this.addcourse.personCount=JSON.stringify(parseInt(this.addcourse.teamCount)*6)
    	},
     	'addcourse.personCount':function(){
    		this.addcourse.teamCount=JSON.stringify(parseInt(this.addcourse.personCount)/6)
    	},   	
    	'templet.templettype':function(){
    		if(this.templet.templettype=='1'){
    			this.templet.isSelf=1;
    			this.templet.isShared=''
    		}
     		if(this.templet.templettype=='2'){
    			this.templet.isSelf=2;
    			this.templet.isShared=1
    		}   
    		if(this.templet.templettype=='3'){
    			this.templet.isSelf=3;
    			this.templet.isShared=''   			
				this.planselect=this.templet.templettype;
				this.videoselect=this.templet.templettype;
				this.drawselect=this.templet.templettype;
				this.workselect=this.templet.templettype;	    			
    		}
 			this.getList();
    	},	
			'planselect':function(){
				if(this.planselect==1){
					this.planisShared='';
					this.planisSelf=1;
				}
				if(this.planselect==2){
					this.planisShared=1;
					this.planisSelf=2;
				}
				if(this.planselect==3){
					this.planisShared='';
					this.planisSelf=3;					
				}	
				this.getplanList();							

			},
			'videoselect':function(){
				if(this.videoselect==1){
					this.videoisShared='';
					this.videoisSelf=1;
				}
				if(this.videoselect==2){
					this.videoisShared=1;
					this.videoisSelf=2;
				}
				if(this.videoselect==3){
					this.videoisShared='';
					this.videoisSelf=3;					
				}	
				this.getvideoList();							

			},
			'workselect':function(){
				if(this.workselect==1){
					this.workisSelf=1;
					this.workisShared='';					
				}
				if(this.workselect==2){
					this.workisSelf=2;
					this.workisShared=1;					
				}
				if(this.workselect==3){
					this.workisSelf=3;
					this.workisShared='';							
				}	
				this.getworkList();	
			},
			'drawselect':function(){
				if(this.drawselect==1){
					this.drawisSelf=1;
					this.drawisShared='';						
				}
				if(this.drawselect==2){
					this.drawisShared=1;
					this.drawisSelf=2;	
				}
				if(this.drawselect==3){
					this.drawisShared='';
					this.drawisSelf=3;						
				}	
				this.getdrawList();							
			}		  	
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },    
    components: {
      quillEditor,
      'previews':preview
    }, 	
    methods: {
  			Lookone:function(row,type){
 				var _this = this;
				var params=row.templetId+"?deep=2";
				if(row.videos==null){
					templetone(params).then((res)=>{
						if(!res.error){
							_this.looktemplet = Object.assign({}, res);
						}
					})	 					
				}else{
					_this.looktemplet = Object.assign({}, row);
				}				
				_this.lookVisible=true;				
			},	   	   	
     		paiFun:function(){
				this.$refs.paiTime.validate((valide)=>{
					if(valide){
				        var param=new URLSearchParams();
				        param.append("stageId",this.courseStages[this.paikeindex].stageId);
				        param.append("courseId",this.courseStages[this.paikeindex].courseId);
				        param.append("isOffline",this.paiTime.isOffline);
				        param.append("startTime",ComFunJS.getNowDate('yyyy-MM-dd HH:mm',this.paiTime.startTime));
				        param.append("location",this.paiTime.location);
						coursstage(param).then((r) => {
							if(!r.error){
								this.editLoading = false;
								this.$message({
									message: '调整成功',
									type: 'success'
								});
								this.getcourseInfo();
    							this.paiFormVisible=false;							
							}else{
								this.$message({
									message: '调整失败',
									type: 'error'
								});										
							}
						})		  						
					}
				})
    		},   	
    		paiIndex:function(index){
    			this.paikeindex=index;
    			this.paiTime.startTime=this.courseStages[index].startTime;
    			if(this.courseStages[index].isOffline){
    				this.paiTime.isOffline='1';
    			}else{
    				this.paiTime.isOffline='0';
    			}
    			this.paiTime.location=this.courseStages[index].location;
    			this.paiFormVisible=true;
    		},    	
			swapItems:function(arr, index1, index2,type) {
		        if(type=='sole'){
		        	arr[index1] = arr.splice(index2, 1, arr[index1])[0];
		        }
		        if(type=='delete'){
		        	arr = arr.splice(index1,1);
		        }
		        return arr;
		    }, 		
			drawRecord:function(arr, $index,type) {
		        if($index == 0&&type!='delete') {
		            return;
		        }
		        if(type=='up'){
		        	this.swapItems(arr, $index, $index - 1,'sole');
		        }
		        if(type=="down"){
		        	this.swapItems(arr, $index, $index + 1,'sole');
		        }
		        if(type=="delete"){
		        	this.swapItems(arr, $index, $index + 1,'delete');
		        }
		        var param=new URLSearchParams();
		        param.append("stageId",this.courseStages[2].stageId);
		        param.append("courseId",this.courseStages[2].courseId);
		        param.append("drawingTypeIds",this.drawingTypeIds.join(','));
				coursstage(param).then((r) => {
					if(!r.error){
						this.editLoading = false;
						this.$message({
							message: '调整成功',
							type: 'success'
						});
						this.getcourseInfo()
					}else{
						this.$message({
							message: '调整失败',
							type: 'error'
						});										
					}
				})		        
			},		
	    	addraw:function(){
				var _this=this;
				var pass=0;
				var result=[];
				$.each(_this.textdrawlist, function(i,result) {
						_this.drawingTypeIds.push(result.type)
				});
				$.each(_this.drawingTypeIds,function(v,value){
					var bool = _this.drawingTypeIds.indexOf(value,v+1); 
					if(bool === -1){
					   result.push(value);
					}
				})
				_this.drawingTypeIds=result;
		        var param=new URLSearchParams();
		        param.append("stageId",this.courseStages[2].stageId);
		        param.append("courseId",this.courseStages[2].courseId);
		        param.append("drawingTypeIds",this.drawingTypeIds.join(','));
				coursstage(param).then((r) => {
					if(!r.error){
						this.editLoading = false;
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.drawFormVisible = false;
						this.getcourseInfo()
					}else{
						this.$message({
							message: '添加失败',
							type: 'error'
						});										
					}
				})				
	    	},			
			drawSelectionChange:function(value){
				this.textdrawlist=value;
			},	    	
			Record:function(row,type,stage,index) {
				if(index==0&&type=='up'){
					return;
				}
				var param=new URLSearchParams();
				param.append("unitId1",row.unitId);
				var unitId2="";
				if(stage=='basis'&&type=='up'){
					unitId2=this.courseStages[0].stageUnits[parseInt(index-1)].unitId
				}
				if(stage=='basis'&&type=='down'){
					unitId2=this.courseStages[0].stageUnits[parseInt(index+1)].unitId				
				}
				if(stage=='case'&&type=='up'){
					unitId2=this.courseStages[1].stageUnits[parseInt(index-1)].unitId				
				}
				if(stage=='case'&&type=='down'){
					unitId2=this.courseStages[1].stageUnits[parseInt(index+1)].unitId				
				}
				param.append("unitId2",unitId2);		
				coursunitsortedit(param).then((res) => {
					if(!res.error){
						//NProgress.done();
						this.$message({
							message: '调整成功',
							type: 'success'
						});
						this.getcourseInfo();							
					}else{
						this.$message({
							type: 'error',
							message: '调整失败'		
						});								
					}
				});
			},    	
			handleDel:function (row) {
				this.$confirm('确认删除该课程章节吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {

					let para =row.unitId;			
					coursunitdelete(para).then((res) => {
						if(!res.error){
							//NProgress.done();
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getcourseInfo();							
						}else{
							this.$message({
								type: 'error',
								message: '删除失败'		
							});								
						}
					});
				}).catch(() => {
					this.$message({
						type: 'error',
						message: '删除失败'			
					});						
				});
			},    	
			handleSelectionChange:function(value){
				var _this=this;
				$.each(value,function(e,result){
					result.vplanIds=result.planIds;
					result.vproblemIds=result.problemIds;
					result.vdrawingIds=result.drawingIds;
					result.vvideoIds=result.videoIds;
					if(_this.courseType=='basis'){
						result.stageId=_this.courseStages[0].stageId
					}else{
						result.stageId=_this.courseStages[1].stageId
					}
				})
				this.unitJson=value;
				console.log(this.unitJson)
			},    	
			addList:function(){
				var _this=this;
				var pass=0;
				if(_this.courseType=='basis'){
					if(_this.courseStages[0].stageUnits.length>0){
						$.each(_this.courseStages[0].stageUnits, function(e,value) {
							$.each(_this.unitJson,function(index,result){
								if(value.name==result.name){
									delete _this.unitJson[index]
								}
							})							
						});						
					}
				}else{
					if(_this.courseStages[1].stageUnits.length>0){
						$.each(_this.courseStages[1].stageUnits, function(e,value) {
							$.each(_this.unitJson,function(index,result){
								if(value.name==result.name){
									delete _this.unitJson[index]		
								}
							})
						});							
					}
				}
				var edittemplet=new URLSearchParams()
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
					$.each(_this.unitJson,function(e,value){	
						if(value.planIds==null){
							value.planIds=""
						}
						if(value.problemIds==null){
							value.problemIds=""
						}
						if(value.drawingIds==null){
							value.drawingIds=""
						}
						if(value.videoIds==null){
							value.videoIds=""
						}						
						delete value.vplanIds;
						delete value.vproblemIds;
						delete value.vdrawingIds;
						delete value.vvideoIds;
						delete value.businessModelName;
						delete value.createTime;
						delete value.intro;
						delete value.isShared;
						delete value.orgId;
						delete value.orgName;
						delete value.realName;
						delete value.updateTime;
						delete value.userId;		
						delete value.referenceCount;			
					})					
					edittemplet.append("unitJson",JSON.stringify(this.unitJson))
					coursunitadd(edittemplet).then((r) => {
						if(!r.error){
							this.editLoading = false;
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.addFormVisible = false;
							this.getcourseInfo()
						}else{
							this.$message({
								message: '添加失败',
								type: 'error'
							});										
						}
					})	
				})
			},
//		    addtemplebox:function(value,type){
//		    	console.log(value)
//		    	var _this=this;
//				this.courseType=type;
//				this.getList();
//				this.getbussinesslist();
//				this.addFormVisible=true;
//			},    	
	     	dateChange(val) {
		        this.addcourse.startTime=val
	      	},
		    skip(link,id,type){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			type:type
		        		}
		        	}
		        )
		    },	    	
			getvideoList: function (type) {
				var courseStage=this.edittemplet.courseStage;
				if(courseStage==1){
					var businessModelId=null
				}else{
					var businessModelId=this.edittemplet.businessModelId
				}
				let params={pageSize:0,sign:this.videoisSelf,isShared:this.videoisShared,courseStage:courseStage,businessModelId:businessModelId};
				videolist(params).then((res) => {
					$.each(res.list, function(e,value) {
						value.videoId=JSON.stringify(value.videoId)
					});
					this.videolist = res.list;
				});	
			},
			getworkList: function (type) {
					var courseStage=this.edittemplet.courseStage;
					if(courseStage==1){
						var businessModelId=null
					}else{
						var businessModelId=this.edittemplet.businessModelId
					}
			
				let params={pageSize:0,sign:this.workisSelf,isShared:this.workisShared,courseStage:courseStage,businessModelId:businessModelId};
				worklist(params).then((res) => {
					$.each(res.list, function(e,value) {
						value.problemId=JSON.stringify(value.problemId)						
					});						
					this.worklist = res.list;
				});
			},		
			getdrawList: function (type) {
					var courseStage=this.edittemplet.courseStage;
					if(courseStage==1){
						var businessModelId=null
					}else{
						var businessModelId=this.edittemplet.businessModelId
					}
				let params={pageSize:0,sign:this.drawisSelf,isShared:this.drawisShared,courseStage:courseStage,businessModelId:businessModelId};
				drawlist(params).then((res) => {
					$.each(res.list, function(e,value) {
						value.drawingId=JSON.stringify(value.drawingId)						
					});						
					this.drawlist = res.list;
				});	
			},	
			getplanList: function (type) {
				var courseStage=this.edittemplet.courseStage;
				if(courseStage==1){
					var businessModelId=null
				}else{
					var businessModelId=this.edittemplet.businessModelId
				}			
				let params={pageSize:0,sign:this.planisSelf,isShared:this.planisShared,courseStage:courseStage,businessModelId:businessModelId};
				planlist(params).then((res) => {
					$.each(res.list, function(e,value) {
						value.planId=JSON.stringify(value.planId)						
					});							
					this.planlist = res.list;
				});	
			},	   
			getAllList:function(courseStage,businessModelId){
				var _this=this;
				_this.worklist=[];
				_this.drawlist=[];
				_this.videolist=[];
				_this.planlist=[];
				_this.worklist2=[];
				_this.drawlist2=[];
				_this.videolist2=[];
				_this.planlist2=[];				
				let selfparams={pageSize:0,sign:4,courseStage:courseStage};
				worklist(selfparams).then((res) => {
					$.each(res.list, function(e,value) {
						value.problemId=JSON.stringify(value.problemId)	
						_this.worklist.push(value);
						_this.worklist2.push(value)
					});
				});					
				drawlist(selfparams).then((res) => {
					$.each(res.list, function(e,value) {
						value.drawingId=JSON.stringify(value.drawingId)	
						_this.drawlist.push(value);
						_this.drawlist2.push(value)
					});
				});			
				videolist(selfparams).then((res) => {
					$.each(res.list, function(e,value) {
						value.videoId=JSON.stringify(value.videoId)	
						_this.videolist.push(value);
						_this.videolist2.push(value)
					});
				});		
				planlist(selfparams).then((res) => {
					$.each(res.list, function(e,value) {
						value.planId=JSON.stringify(value.planId)	
						_this.planlist.push(value);
						_this.planlist2.push(value)
					});
				});		
			},			
			getone:function(row,index,type){	
				this.courseType=type;				
				this.getbussinesslist()
				if(type=='basis'){
					row.courseStage=0
				}else{
					row.courseStage=1
				}
				this.getAllList(row.courseStage,row.businessModelId);
				var _this = this;
				this.stage=index;	
				this.unit=row.unitId;
				_this.edittemplet={};	
				if(row.drawingIds!=null&&!Array.isArray(row.drawingIds)){
					row.drawingIds=row.drawingIds.split(',')
				}
				if(row.planIds!=null&&!Array.isArray(row.planIds)){
					row.planIds=row.planIds.split(',')
				}	
				if(row.problemIds!=null&&!Array.isArray(row.problemIds)){
					row.problemIds=row.problemIds.split(',')
				}	
				if(row.videoIds!=null&&!Array.isArray(row.videoIds)){
					row.videoIds=row.videoIds.split(',')
				}					
				_this.edittemplet = Object.assign({}, row);
				_this.editFormVisible=true;
			},
			editSubmit: function () {
				var _this=this;
				$.each(_this.edittemplet.videoIds,function(e,value){
					$.each(_this.videolist2,function(i,result){
						if(value==result.videoId){
							_this.edittemplet.videos.push(result)
						}
					})
				})
				$.each(_this.edittemplet.problemIds,function(e,value){
					$.each(_this.worklist2,function(i,result){
						if(value==result.problemId){
							_this.edittemplet.problems.push(result)
						}
					})
				})		
				$.each(_this.edittemplet.drawingIds,function(e,value){
					$.each(_this.drawlist2,function(i,result){
						if(value==result.drawingId){
							_this.edittemplet.drawings.push(result)
						}
					})
				})	
				$.each(_this.edittemplet.planIds,function(e,value){
					$.each(_this.planlist2,function(i,result){
						if(value==result.planId){
							_this.edittemplet.plans.push(result)
						}
					})
				})					
				if(_this.edittemplet.drawingIds.length>0){
					_this.edittemplet.drawingIds=_this.edittemplet.drawingIds.join(',')
				}else{
					_this.edittemplet.drawingIds=""
				}
				if(_this.edittemplet.videoIds.length>0){
					_this.edittemplet.videoIds=_this.edittemplet.videoIds.join(',')
				}else{
					_this.edittemplet.videoIds=""
				}				
				if(_this.edittemplet.problemIds.length>0){
					_this.edittemplet.problemIds=_this.edittemplet.problemIds.join(',')
				}else{
					_this.edittemplet.problemIds=""
				}				
				if(_this.edittemplet.planIds.length>0){
					_this.edittemplet.planIds=_this.edittemplet.planIds.join(',')
				}else{
					_this.edittemplet.planIds=""
				}
				var edittemplet = new URLSearchParams();
				this.$refs.edittemplet.validate((valid)=>{
					if(valid){
						edittemplet.append('planIds',this.edittemplet.planIds);
						edittemplet.append('problemIds',this.edittemplet.problemIds);
						edittemplet.append('videoIds',this.edittemplet.videoIds);
						edittemplet.append('drawingIds',this.edittemplet.drawingIds);
						edittemplet.append('roughTime',this.edittemplet.roughTime);
						edittemplet.append('name',this.edittemplet.name);
						edittemplet.append('unitId',this.unit);
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							coursunitedit(edittemplet).then((r) => {
								if(!r.error){
									this.editLoading = false;
									this.$message({
										message: '更新成功',
										type: 'success'
									});
									this.editFormVisible = false;
									this.getcourseInfo()
								}else{
									this.editFormVisible = false;
									this.$message({
										message: '更新失败',
										type: 'error'
									});										
								}
							})							
						})
					}
				})

			},				

	    addtemplebox:function(value,type){
			this.templet={
				total:'',
				page:'1',
				pagesize:'5',	
				isShared:' ',
				isSelf:'1',
				templettype:"1",
				courseStage:value,
				
				key:""
			};
			this.templetbusinessModelId=null;
			this.courseType=type;
			this.getList();
			this.getbussinesslist();
			this.addFormVisible=true;

		},

		handleCurrentChange(val) {
			this.templet.page = val;
			this.getList();
		},			
		getbussinesslist:function(){
			bussinesslist().then((res)=>{

				this.bussinessList=res;
			})
		},			
		getList: function () {
			this.loading = true;
			//NProgress.start();
			let params={pageNum:this.templet.page,businessModelId:this.templetbusinessModelId,pageSize:5,courseStage:this.templet.courseStage,key:this.templet.key,isShared:this.templet.isShared,sign:this.templet.isSelf};
			templetlist(params).then((res) => {
				this.templet.total=res.total;		
				this.Lists = res.list;
				this.loading = false;
			});	
		},	
		getcourseInfo:function(){
			var params=this.$route.query.id;
			var _this=this;
			courseone(params).then((res)=>{			
				_this.courseStages=res.courseStages;
			})			
		}
   },
	mounted() {
		var _this=this;
		setTimeout(function(){			
			_this.courseStages=_this.$store.state.courseInfo.courseStages;
			_this.drawingTypeIds=_this.courseStages[2].drawingTypeIds.split(',');
			_this.InferisOffline=_this.courseStages[2].isOffline;
			_this.Inferlocation=_this.courseStages[2].location;
			_this.RoadisOffline=_this.courseStages[3].isOffline;
			_this.Roadlocation=_this.courseStages[3].location;			
		},100)
		
	}    
  }
</script>
<style>
</style>